<template>
  <div class="w-[100%] h-[100%]">

    <div class="mt-[0px]">
      <ContentWrap :show-border="false">
        <SearchBox
          @changeVal="onChange"
          :queryForm="searchList" :showExpland="true" :show-export="false" @query="handleSearchQuery"/>
      </ContentWrap>
    </div>

    <div class="mt-[30px]">
      <QueryTable
        pk="id"
        :list="dataList"
        :total="total"
        :btns="tableBtnList"
        @execute="handleBtnClick"
        v-model="queryParams"
        :thead="th"
        :show-action="true"
        :show-expand="false"
        :show-section="false"
      >
        <template #product="{row}">
          <div class="flex items-center">
            <ImagePreview :src="row.cover" width="48px" height="48px"/>

            <div class="ml-[10px]">
              <div style="text-align: left;">{{ row.title }}</div>
              <div class="text-[#999999]">ID:{{ row.id }}</div>
            </div>
          </div>


        </template>

      </QueryTable>

    </div>

  </div>
</template>
<script setup lang="ts">
import Icon from "@/components/Icon/src/Icon.vue"
import QueryTable from "@/components/TableData/index.vue"
import ImagePreview from "@/components/ImagePreview/index.vue"
import type {TradeOrderQueryVO} from "@/api/mall/trade/order";
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
import type {PurchaseAdvice} from "@/api/purchase/advice/type";

import {getProductStatistics} from "@/api/statistics/product";
import {getSimpleDeptList} from "@/api/system/dept";
import {getUserPageNew} from "@/api/member/user";
import {WebSiteApi} from "@/api/website/website";

const router = useRouter() // 路由对象

const searchList=ref(
  [
  {
    label: '商品名称/商品id',
    code: 'productNmae',
    type: 'input'
  },

  {
    label: '访问站点',
    code: 'siteId',
    type: 'select',
    options: [ ]
  },
  {
    label: '部门',
    code: 'deptId',
    type: "select"
  },
  {
    label: '人员',
    code: 'userId',
    type: "select"
  },
  {
    label: '日期',
    code: 'createdTime',
    type: 'dateRange'
  },

]
)

const initQueryParams = {
  pageNo: 1, pageSize: 10
}


const tableBtnList = ref([
  {
    color: '#3721FF',
    code: 'detail',
    name: '详情'
  }
]);


const th = ref([
  {
    name: '商品',
    code: 'product',
    type: 'numberRanger',
    search: true,
    width: "250px"
  },
  {
    name: '部门',
    code: 'deptName',
    type: 'date',
    search: true
  },
  {
    name: '人员',
    code: 'createName',
    type: 'numberRanger',
    search: true
  },

  {
    name: '地区',
    code: 'areaName',
    search: false
  },

  {
    name: '独立访问数',
    code: 'uniqueVisitors',
    type: 'numberRanger',
    search: true
  },
  {
    name: '页面访问数',
    code: 'totalVisitors',
    search: false
  },
  {
    name: '有效订单数',
    code: 'validOrderCount',
    search: false
  },
  {
    name: '总订单数',
    code: 'totalOrderCount',
    search: false
  },
  {
    name: '转化率',
    code: 'conversionRatePercent',
    search: false
  },
  {
    name: '客单价',
    code: 'avgValue',
    search: false
  },
  {
    name: '营业额',
    code: 'totalRevenue',
    search: false
  },
]);


const dataList = ref<PurchaseAdvice[]>([]);
const ids = ref<Array<string | number>>([]);
const total = ref(0);

const initRow = {
  cover: null,
  sku: null,
  spec: null,
  name: null,
  productId: null,
  advice: null,
  occupy: null,
  stock: null,
  inTransit: null,
  noAuditInTransit: null,
}

const selectedRow = ref<PurchaseAdvice>({...initRow})

const isShowDialog = ref(false)


const queryParams = ref({
  ...initQueryParams
})

const handleSearchQuery = (val) => {
  /***
   * 搜索框查询条件，目前考虑在查询时 queryParams = {...val,pageNo:1,pageSize:10}
   * */
  queryParams.value = {
    ...initQueryParams,
    ...val
  }
  getList()
}

const handleBtnClick = e => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const fn = {
  detail({data}) {
    router.push(`/product/product/analysis?id=${ data.row.id }`);
    // selectedRow.value = data.row;
    // isShowDialog.value = true
  }
}

const getList = async () => {
  let res = await getProductStatistics({
    ...queryParams.value,
    startDate:queryParams.value.createdTime && queryParams.value.createdTime.length >0 ? queryParams.value.createdTime[0] : null,
    endDate:queryParams.value.createdTime && queryParams.value.createdTime.length >0 ? queryParams.value.createdTime[1] : null,
  });
  dataList.value = res.list || [];
  total.value = res.total;
}

const onChange = ({item, form}) => {
  console.log("11111")
  console.log(item)
  if (item.code == "deptId") {
    getUser(form.deptId);
  }
}

/**
 * 根据部门获取
 * */
const getUser = async (deptId) => {
  let res = await getUserPageNew({
    deptId
  });

  let item = searchList.value.find(at => {
    return at.code == "userId"
  })
  item.options = (res || []).map(item => {
    return {
      label: item.nickname,
      value: item.id
    }
  });
}




const initPromise = async () => {
  let res = await Promise.all([getSimpleDeptList(),WebSiteApi.getWebSitePage({  pageNo: 1, pageSize: 10000})])
  //获取部门
  let item = searchList.value.find(it => {
    return it.code == "deptId"
  })
  item.options = res[0]?.map(item => {
    return {
      label: item.name,
      value: item.id
    }
  })

   item = searchList.value.find(it => {
    return it.code == "siteId"
  })
  item.options = res[1]?.list?.map(item => {
    return {
      label: item.webName,
      value: item.id
    }
  })
}


onMounted(() => {
  getList();

  initPromise();

})


</script>
<style lang="scss" scoped>

</style>
